<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="Content-Language" content="en">
	<title>Bar Menu - Example 3 - MyGosuMenu</title>
    <script type="text/javascript" src="BarMenu.js"></script>
    <style type="text/css">
    body {
        background-color: #cccccc;
    }
	body {
		font-family: tahoma; font-size: 13px;
    }
	h1 { font-size: 24px; }
    div.left {
        width: 190px;
        height: 100%;
        background: #fff;
    }
    td.top {
        background-color: #999999;
        line-height: 26px;
        text-indent: 10px;
        font-size: 13px;
        font-weight: bold;
        font-family: tahoma;
        color: #ffffff;
    }
    td.section {
        padding: 6px 12px;
    }
    .bar-menu {
        -moz-user-select: none;
    }
    .bar-menu .box1 {
        background: url("images/tree-node.gif") no-repeat;
        padding-left: 19px;
        cursor: default;
    }
    .bar-menu .box1-open {
        background: url("images/tree-node-open.gif") no-repeat;
        padding-left: 19px;
        cursor: default;
    }
    .bar-menu .box1,
    .bar-menu .box1-open, {
        color: #000000;
        font-family: arial;
        font-size: 12px;
    }
    /* mozilla fix */
    html>body .bar-menu .box1,
    html>body .bar-menu .box1-open {
        color: #000000;
        font-family: arial;
        font-size: 12px;
        line-height: 16px;
        padding-bottom: 1px;
    }
    /* ie fix */
    * html .bar-menu .box1,
    * html .bar-menu .box1-open {
        color: #000000;
        font-family: arial;
        font-size: 12px;
        height: 16px;
    }
    .bar-menu .section {
        font-family: arial;
        font-size: 12px;
        line-height: 16px;
        display: none;
    }
    .bar-menu .section a {
        color: #000000;
        text-decoration: none;
        white-space: nowrap;
    }
    .bar-menu .section a:hover {
        color: #0000ff;
        text-decoration: none;
        white-space: nowrap;
    }
    .bar-menu .box2 {
        background: url("images/tree-leaf.gif") no-repeat;
        padding-left: 19px;
    }
    .bar-menu .box2-last {
        background: url("images/tree-leaf-last.gif") no-repeat;
        padding-left: 19px;
    }
    </style>
</head>
<body>

<h1>Bar Menu - Example 3</h1>

<p>
	Project: <a href="http://www.gosu.pl/MyGosuMenu/">MyGosuMenu</a> <br>
	Menu type: BarMenu
</p>

<script type="text/javascript">
/* preload images, you can remove this code */
img1 = new Image();
img1.src = "images/tree-node.gif";
img2 = new Image();
img2.src = "images/tree-node-open.gif";
img3 = new Image();
img3.src = "images/tree-leaf.gif";
img4 = new Image();
img4.src = "images/tree-leaf-last.gif";
</script>

<script type="text/javascript">
window.onload = function() {
    var barMenu3a = new BarMenu('bar-menu3a');
    barMenu3a.box1Hover = false;
    barMenu3a.box2Hover = false;
    barMenu3a.init();
    var barMenu3b = new BarMenu('bar-menu3b');
    barMenu3b.box1Hover = false;
    barMenu3b.box2Hover = false;
    barMenu3b.init();
    var barMenu3c = new BarMenu('bar-menu3c');
    barMenu3c.box1Hover = false;
    barMenu3c.box2Hover = false;
    barMenu3c.init();
}
</script>

<div class="left">

    <table cellspacing="0" cellpadding="0" width="100%">
    <tr>
        <td class="top">&raquo; Products</td>
    </tr>
    <tr>
        <td class="section">

            <div id="bar-menu3a" class="bar-menu">

                <table cellspacing="0" cellpadding="0" width="100%">
                <tr>
                    <td>
                        <div><span class="box1">Product One</span></div>
                        <div class="section">
                            <div class="box2"><a href="example3.html">Overview</a></div>
                            <div class="box2"><a href="example3.html">Features</a></div>
                            <div class="box2-last"><a href="example3.html">Requirements</a></div>
                        </div>
                    </td>
                </tr>
                <tr><td height="2"></td></tr>
                <tr>
                    <td>
                        <div><span class="box1">Product Two</span></div>
                        <div class="section">
                            <div class="box2"><a href="example3.html">Overwiev</a></div>
                            <div class="box2"><a href="example3.html">Features</a></div>
                            <div class="box2"><a href="example3.html">Requirements</a></div>
                            <div class="box2"><a href="example3.html">Screenshots</a></div>
                            <div class="box2"><a href="example3.html">Flash Demos</a></div>
                            <div class="box2-last"><a href="example3.html">Live Demo</a></div>
                        </div>
                    </td>
                </tr>
                <tr><td height="2"></td></tr>
                <tr>
                    <td>
                        <div><span class="box1">Product Three</span></div>
                        <div class="section">
                            <div class="box2"><a href="example3.html">Overview</a></div>
                            <div class="box2"><a href="example3.html">Features</a></div>
                            <div class="box2-last"><a href="example3.html">Requirements</a></div>
                        </div>
                    </td>
                </tr>
                <tr><td height="2"></td></tr>
                <tr>
                    <td>
                        <div><span class="box1">Product Four</span></div>
                        <div class="section">
                            <div class="box2"><a href="example3.html">Overview</a></div>
                            <div class="box2"><a href="example3.html">Features</a></div>
                            <div class="box2"><a href="example3.html">Requirements</a></div>
                            <div class="box2"><a href="example3.html">Screenshots</a></div>
                            <div class="box2-last"><a href="example3.html">Live Demo</a></div>
                        </div>
                    </td>
                </tr>
                </table>

            </div>

        </td>
    </tr>
    <tr>
        <td class="top">&raquo; Downloads</td>
    </tr>
    <tr>
        <td class="section">

            <div id="bar-menu3b" class="bar-menu">

                <table cellspacing="0" cellpadding="0" width="100%">
                <tr>
                    <td>
                        <div><span class="box1">Program One</span></div>
                        <div class="section">
                            <div class="box2"><a href="example3.html">Windows Download</a></div>
                            <div class="box2"><a href="example3.html">Solaris Download</a></div>
                            <div class="box2-last"><a href="example3.html">Linux Download</a></div>
                        </div>
                    </td>
                </tr>
                <tr><td height="2"></td></tr>
                <tr>
                    <td>
                        <div><span class="box1">Program Two</span></div>
                        <div class="section">
                            <div class="box2"><a href="example3.html">Windows Download</a></div>
                            <div class="box2-last"><a href="example3.html">Linux Download</a></div>
                        </div>
                    </td>
                </tr>
                <tr><td height="2"></td></tr>
                <tr>
                    <td>
                        <div><span class="box1">Program Three</span></div>
                        <div class="section">
                            <div class="box2-last"><a href="example3.html">Linux Download</a></div>
                        </div>
                    </td>
                </tr>
                </table>

            </div>

        </td>
    </tr>
    <tr>
        <td class="top">&raquo; Other</td>
    </tr>
    <tr>
        <td class="section">

            <div id="bar-menu3c" class="bar-menu">

                <table cellspacing="0" cellpadding="0" width="100%">
                <tr><td height="2"></td></tr>
                <tr>
                    <td>
                        <div><span class="box1">Partners</span></div>
                        <div class="section">
                            <div class="box2"><a href="example3.html">Partner Benefits</a></div>
                            <div class="box2"><a href="example3.html">Partner Application</a></div>
                            <div class="box2-last"><a href="example3.html">Partner Listing</a></div>
                        </div>
                    </td>
                </tr>
                <tr><td height="2"></td></tr>
                <tr>
                    <td>
                        <div><span class="box1">Customers</span></div>
                        <div class="section">
                            <div class="box2"><a href="example3.html">Customer One</a></div>
                            <div class="box2"><a href="example3.html">Customer Two</a></div>
                            <div class="box2"><a href="example3.html">Customer Three</a></div>
                            <div class="box2"><a href="example3.html">Customer Four</a></div>
                            <div class="box2"><a href="example3.html">Customer Five</a></div>
                            <div class="box2"><a href="example3.html">Customer Six</a></div>
                            <div class="box2-last"><a href="example3.html">Customer Seven</a></div>
                        </div>
                    </td>
                </tr>
                <tr><td height="2"></td></tr>
                <tr>
                    <td>
                        <div><span class="box1">About us</span></div>
                        <div class="section">
                            <div class="box2"><a href="example3.html">Executive Team</a></div>
                            <div class="box2"><a href="example3.html">Investors</a></div>
                            <div class="box2"><a href="example3.html">Career</a></div>
                            <div class="box2"><a href="example3.html">Press Center</a></div>
                            <div class="box2"><a href="example3.html">Success Stories</a></div>
                            <div class="box2-last"><a href="example3.html">Contact Us</a></div>
                        </div>
                    </td>
                </tr>
                </table>

            </div>

        </td>
    </tr>

    </table>

</div>

</body>
</html>